<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a="http://richfaces.org/a4j"
    template="layout/templateList.xhtml">

<ui:define name="body">
	<style>
		.even-row{
			background-color: white;
		}
		.odd-row{
			background-color: #FFF5EE; 
		}
	</style>
	
	<table align="right">
		<tr>
			<td>
				<h:commandButton immediate="true"
					onclick="abrirPopup('help_online/help_despesa.seam');" 
					title="Ajuda Online"
					alt="Ajuda Online"
					image="img/help_peq.jpg"/>
			</td>
		</tr>
	</table>
	
	<h2 class="title"><a href="#">Gerenciar Despesas</a></h2><br/>
	
		<h:form id="despesasForm">
		
			<h:panelGrid columns="1" style="align:center;">
			
				<s:decorate template="/layout/edit.xhtml">
					<ui:define name="label">Mês/Ano de referência:</ui:define>
					<h:commandButton image="img/backward.png" 
						action="#{despesasController.voltarMes()}"/>
					<rich:spacer width="15px"/>
					<h:outputText value="#{despesasController.recuperaMesExtenso(despesasController.mesReferencia.mesRef)}/#{despesasController.mesReferencia.anoRef}" />
					<rich:spacer width="15px"/>
					<h:commandButton action="#{despesasController.avancarMes()}"
						image="img/forward.png"
						rendered="#{despesasController.mesReferencia.flgStatus != 'A'}"/>
				</s:decorate>
				
			</h:panelGrid>
			
			<br/><br/>
			
			<table align="right">
				<tr>
					<td>
						<strong>Legenda:</strong>
					</td>
					<td>
						<h:graphicImage value="img/icone_verde.png" />
					</td>
					<td>
						<h:outputText value="Despesa a vencer ou já paga" />
					</td>
					<td>
						<h:graphicImage value="img/icone_amarelo.png" />
					</td>
					<td>
						<h:outputText value="Despesa vencendo hoje" />
					</td>
					<td>
						<h:graphicImage value="img/icone_vermelho.png" />
					</td>
					<td>
						<h:outputText value="Despesa vencida" />
					</td>
				</tr>
			</table>
			<rich:dataTable value="#{despesasController.despesas}"
				rowClasses="even-row, odd-row"
				var="_desp"
				id="tabelaDespesas">
				
				<rich:column>
					<f:facet name="header">Status</f:facet>
					<h:graphicImage value="#{despesasController.recuperaIconeStatus(_desp)}"/>
				</rich:column>
				
				<rich:column>
					<f:facet name="header">Descrição</f:facet>
					<h:outputText value="#{_desp.dscDespesa}" />
				</rich:column>
				
				<rich:column>
					<f:facet name="header">Tipo</f:facet>
					<h:outputText value="#{_desp.tpoDespesaExtenso}" />
				</rich:column>
				
				<rich:column>
					<f:facet name="header">Data de vencimento</f:facet>
					<h:outputText value="#{_desp.dtaVencimento}">
						<s:convertDateTime pattern="dd/MM/yyyy"/>
					</h:outputText>
				</rich:column>
				
				<rich:column>
					<f:facet name="header">Data de pagamento</f:facet>
					<rich:calendar value="#{_desp.dtaPagamento}"
						inputStyle="width: 65px;"
						datePattern="dd/MM/yyyy"
						buttonLabel=" "
						enableManualInput="true"
						disabled="#{despesasController.mesReferencia.flgStatus == 'F'}"
						oninputkeydown="Mascara(this,Data)"
						oninputkeyup="Mascara(this,Data)"/>	
				</rich:column>
				
				<rich:column>
					<f:facet name="header">Valor</f:facet>
					<h:inputText value="#{_desp.vlrDespesa}"
						style="width:50px;"
						converter="conversorMonetario" 
						onkeydown="Mascara(this,Valor)"
						onkeyup="Mascara(this,Valor)"
						disabled="#{despesasController.mesReferencia.flgStatus == 'F'}"
						maxlength="8">
						<a:support event="onblur" action="#{despesasController.calculaTotalDespesas()}"
							reRender="totalDespesas"/>
					</h:inputText>
				</rich:column>
				
				<rich:column>
					<f:facet name="header">Operações</f:facet>
					<h:commandButton value="EXCLUIR" action="#{despesasController.excluir(_desp)}"
						alt="EXCLUIR"
						title="EXCLUIR"
						image="img/excluir.png"
						disabled="#{despesasController.mesReferencia.flgStatus == 'F'}"
						onclick="javascript:if(!confirm('Tem certeza que deseja excluir a despesa?'))return false;" />
					<rich:spacer width="5px"/>
					<h:commandButton value="EDITAR"
						action="#{despesasController.editarDespesa(_desp)}" 
						alt="EDITAR"
						title="EDITAR"
						image="img/editar.png"
						disabled="#{despesasController.mesReferencia.flgStatus == 'F'}" />
				</rich:column>
				
				<f:facet name="footer">
					<rich:columnGroup>
						<rich:column colspan="5" style="text-align:center;">
							<h:outputText value="TOTAL" />
						</rich:column>
						<rich:column colspan="2">
							<h:outputText value="#{despesasController.valorTotalDespesas}" id="totalDespesas"
								converter="conversorMonetario"/>
						</rich:column>
					</rich:columnGroup>
				</f:facet>
			
			</rich:dataTable>

			<div class="actionButtons">
	            <h:commandButton id="submit" value="Salvar" action="#{despesasController.salvar()}"
	            	rendered="#{despesasController.mesReferencia.flgStatus != 'F'}"
	            	onclick="javascript:if(!confirm('Tem certeza que deseja salvar?'))return false;"/>
	        	<h:commandButton id="new" value="Nova despesa" action="#{despesasController.inicializaPopupNovaDespesa()}"
	        		rendered="#{despesasController.mesReferencia.flgStatus != 'F'}"/>
	        	<h:commandButton id="fechar" value="Fechar Mês" action="#{despesasController.fecharMes()}"
	        		rendered="#{despesasController.mesReferencia.flgStatus != 'F'}"
	        		onclick="javascript:if(!confirm('Tem certeza que deseja fechar o mês?'))return false;"/>
	        	<h:commandButton id="reabrir" value="Reabrir Mês" action="#{despesasController.reabrirMes()}"
	        		rendered="#{despesasController.mesReferencia.flgStatus == 'F'}"
	        		onclick="javascript:if(!confirm('Tem certeza que deseja reabrir o mês?'))return false;"/>
	        </div>
	        
	       	<br/>
	       	
	       	<a:region rendered="#{despesasController.mesReferencia.flgStatus == 'F'}">
	       		<fieldset>
					<legend>Fechamento do mês</legend>
					<table width="100%" align="center"
						cellpadding="3" cellspacing="3" 
						style="border: 5px solid white;">
						<tr align="center">
							<td bgcolor="#B0E0E6" bordercolor="white">
								<font size="4" color="black">Total de pedidos pagos:</font>
							</td>
							<td bgcolor="#B0E0E6" bordercolor="white">
								<font size="4" color="black">R$<rich:spacer width="5px"/><h:outputText value="#{despesasController.valorTotalPedidos}" converter="conversorMonetario" /></font>
							</td>
							<td bgcolor="#B0E0E6" bordercolor="white">
								<font size="4" color="black">Total de pacotes:</font>
							</td>
							<td bgcolor="#B0E0E6" bordercolor="white">
								<font size="4" color="black">R$<rich:spacer width="5px"/><h:outputText value="#{despesasController.valorTotalPacotes}" converter="conversorMonetario" /></font>
							</td>
						</tr>
						<tr align="center">
							<td bgcolor="#B0E0E6" bordercolor="white" colspan="2">
								<font size="4" color="black">Total de atendimentos pagos (veterinária):</font>
							</td>
							<td bgcolor="#B0E0E6" bordercolor="white" colspan="2">
								<font size="4" color="black">R$<rich:spacer width="5px"/><h:outputText value="#{despesasController.valorTotalAtendimentos}" converter="conversorMonetario" /></font>
							</td>
						</tr>
						<tr align="center">
							<td bgcolor="#FA8072" bordercolor="white">
								<font size="4" color="white">Total de vales:</font>
							</td>
							<td bgcolor="#FA8072" bordercolor="white">
								<font size="4" color="white">R$<rich:spacer width="5px"/><h:outputText value="#{despesasController.valorTotalVales}" converter="conversorMonetario" /></font>
							</td>
							<td bgcolor="#FA8072" bordercolor="white">
								<font size="4" color="white">Total de despesas:</font>
							</td>
							<td bgcolor="#FA8072" bordercolor="white">
								<font size="4" color="white">R$<rich:spacer width="5px"/><h:outputText value="#{despesasController.valorTotalDespesas}" converter="conversorMonetario" /></font>
							</td>
						</tr>
						<tr align="center">
							<td colspan="2" bgcolor="#FFEC8B" bordercolor="white">
								<font size="4" color="black">Total de pedidos e atendimentos não pagos:</font>
							</td>
							<td colspan="2" bgcolor="#FFEC8B" bordercolor="white">
								<font size="4" color="black">R$<rich:spacer width="5px"/><h:outputText value="#{despesasController.valorTotalPedidosNaoPagos}" converter="conversorMonetario" /></font>
							</td>
						</tr>
						<tr align="center">
							<td colspan="2" bgcolor="#E8E8E8" bordercolor="white">
								<font size="4" color="black">Total líquido:</font>
							</td>
							<td colspan="2" bgcolor="#E8E8E8" bordercolor="white">
								<font size="4" color="black">R$<rich:spacer width="5px"/><h:outputText value="#{despesasController.valorTotalLiquido}" converter="conversorMonetario" /></font>
							</td>
						</tr>
					</table>	       		
	       		</fieldset>
	       	</a:region>
		</h:form>
		<br/><br/>		
   
   <rich:modalPanel  id="painelNovaDespesa" 
   		showWhenRendered="#{despesasController.exibirPopupNovaDespesa}"
	    height="350" width="500">
	    <f:facet name="header">
	        <h:outputText value="Nova Despesa" />
	    </f:facet>
	    
	    <f:facet name="controls">
	    	<h:form id="formCancelar">
		    	<h:commandButton value="FECHAR" 
		    		image="/img/publish_x.png" action="#{despesasController.cancelarNovaDespesa()}" />
	    	</h:form>
	    </f:facet>
	    <h:form id="formNovaDespesa">
	    	<h:panelGrid columns="1">
	    		<s:decorate template="/layout/edit.xhtml">
	    			<ui:define name="label">Descrição:</ui:define>
	    			<h:inputText value="#{despesasController.despesaEdicao.dscDespesa}"
	    				required="true"
	    				maxlength="50" style="width:150px;" />
	    		</s:decorate>
	    	</h:panelGrid>
	    	<h:panelGrid columns="2">
	    		<s:decorate template="/layout/edit.xhtml">
	    			<ui:define name="label">Data de vencimento:</ui:define>
	    			<rich:calendar value="#{despesasController.despesaEdicao.dtaVencimento}"
	    				required="true"
						datePattern="dd/MM/yyyy"
						enableManualInput="true"
						oninputkeydown="Mascara(this,Data)"
						oninputkeyup="Mascara(this,Data)"/>	
    			</s:decorate>
    			
    			<s:decorate template="/layout/edit.xhtml">
	    			<ui:define name="label">Tipo:</ui:define>
	    			<h:selectOneMenu value="#{despesasController.despesaEdicao.tpoDespesa}"
	    				required="true">
	    				<f:selectItems value="#{despesasController.listaTiposDespesa}"/>
	    			</h:selectOneMenu>
	    		</s:decorate>
    		</h:panelGrid>
    		<h:panelGrid columns="1">
	    		<s:decorate template="/layout/edit.xhtml">
	    			<ui:define name="label">Observações:</ui:define>
	    			<h:inputTextarea value="#{despesasController.despesaEdicao.dscObservacao}"
	    				required="false"
	    				rows="3"
	    				cols="50"/>
	    		</s:decorate>
	    	</h:panelGrid>
	    	<br/>
	    	<div align="center" class="actionButtons">
	    		<h:commandButton value="Adicionar" action="#{despesasController.salvarNovaDespesa()}" />
	    		<h:commandButton value="Cancelar" immediate="true" 
	    			action="#{despesasController.cancelarNovaDespesa()}" />
	    	</div>
	    </h:form>
   </rich:modalPanel>

 </ui:define>
</ui:composition>
